<template>
  <div class="course-info">
    <el-form ref="dataForm" :model="course" :rules="rules" label-width="100px" style="padding-right: 40px">
      <el-form-item label="课程名" prop="courseName" style="width: 400px">
        <el-input v-model="course.courseName" />
      </el-form-item>
      <el-form-item label="课程价格" prop="price" style="width: 400px">
        <el-input v-model="course.price" />
      </el-form-item>
      <el-form-item label="会员价格" prop="vipPrice" style="width: 400px">
        <el-input v-model="course.vipPrice" />
      </el-form-item>
      <el-form-item label="课程门店" prop="storeId" style="width:400px">
        <el-select v-model="course.storeId" placeholder="请选择门店">
          <el-option v-for="item in stores" :key="item.id" :label="item.storeName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="教练名称" prop="coachId" style="width: 400px">
        <el-select v-model="course.coachId" placeholder="请选择">
          <el-option v-for="item in coachs" :key="item.id" :label="item.coachName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime" style="width: 400px">
        <el-date-picker v-model="course.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime" style="width: 400px">
        <el-date-picker v-model="course.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" />
      </el-form-item>
      <el-form-item label="最大人数" prop="max" style="width: 250px">
        <el-input v-model="course.max" />
      </el-form-item>
      <el-form-item label="头像" prop="courseImg">
        <el-upload
          class="avatar-uploader"
          action="/dev-api/admin/common/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="course.courseImg" :src="course.courseImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item label="课程详情" prop="courseDesc">
        <tinymce v-model="course.courseDesc" :height="300" />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" icon="el-icon-refresh-right" @click="cancel">取 消</el-button>
      <el-button type="primary" icon="el-icon-check" size="small" @click="saveOrUpdate('dataForm')">确
        定</el-button>
    </span>
  </div>
</template>

<script>
import { pcTextArr } from 'element-china-area-data'
import Tinymce from '@/components/Tinymce'
import api from '@/api/content/course'
import storeApi from '@/api/content/store'
import coachApi from '@/api/content/coach'

const defaultForm = {
  id: '',
  courseName: '',
  price: '',
  vipPrice: '',
  storeId: '',
  coachId: '',
  courseImg: '',
  max: '',
  courseDesc: '',
  startTime: '',
  endTime: ''
}

export default {
  components: { Tinymce },
  data() {
    return {
      dialogVisible: false,
      pcTextArr,
      course: defaultForm,
      stores: [],
      coachs: [],
      rules: {
        courseName: [
          { required: true, message: '请填写课程名', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请填写价格', trigger: 'blur' }
        ],
        vipPrice: [
          { required: true, message: '请填写会员价格', trigger: 'blur' }
        ],
        storeId: [
          { required: true, message: '请填写门店名称', trigger: 'change' }
        ],
        coachId: [
          { required: true, message: '请填写教练名称', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请填写开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请填写结束时间', trigger: 'change' }
        ],
        max: [
          { required: true, message: '请填写最大上课人数', trigger: 'blur' }
        ],
        courseImg: [
          { required: true, message: '请上传图片', trigger: 'trigger' }
        ]
      }
    }
  },
  mounted() {
    this.fetchStoreData()
    this.fetchCoachData()
    console.log(this.$route.query.id)
    if (!this.$route.query.id) {
      this.course = defaultForm
    } else {
      this.fetchData(this.$route.query.id)
    }
  },
  methods: {
    fetchData(id) {
      api.getById(id).then((response) => {
        this.course = response.data
      })
    },
    // 加载门店列表数据
    fetchStoreData() {
      storeApi.getList().then(response => {
        this.stores = response.data
      })
    },
    // 加载门店列表数据
    fetchCoachData() {
      coachApi.getList().then(response => {
        this.coachs = response.data
      })
    },
    // 添加或更新
    saveOrUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.course.id) {
            this.save(formName)
          } else {
            this.update(formName)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 添加
    save() {
      api.save(this.course).then((response) => {
        this.$message.success(response.message || '操作成功')
        this.$router.replace('/content/course')
      })
    },
    // 更新
    update(formName) {
      api.updateById(this.course).then((response) => {
        this.$message.success(response.message || '操作成功')
        this.$router.replace('/content/course')
      })
    },

    // 上传图片成功
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.course.courseImg = res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 取消
    cancel() {
      this.$router.go(-1)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.course.courseImg = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.course-info {
  margin: 30px;
  margin-top: 40px;

  .dialog-footer {
    margin-left: 40px;
    margin-bottom: 20px;
  }
}
</style>
